<template>
  <div>
    <div class="order" v-for="item in orderList" :key="item.id" @click="$router.push('/orderdetail/' + item.order_id)">
      <div class="header">
        <div v-for="goods in item.goods" :key="goods.id" class="goods">
          <img :src="goods.thumb_path" />
          <div class="text">
            <div class="title">{{ goods.title }}</div>
            <span class="price">￥{{ goods.sell_price }}.00</span>
          </div>
        </div>
      </div>
      <van-divider />
      <div class="footer">
        <div class="text">
          <span>{{ $momentFun(item.add_time * 1000) }}</span>
          <span>共{{ item.number }}件商品 应付金额：￥{{ item.total_price }}</span>
        </div>
        <div class="btn">
          <!-- 已取消 -->
          <template v-if="item.is_cancel === 1">
            <van-tag color="#ccc" plain>已取消</van-tag>
            <van-tag color="#000" plain @click.stop="$emit('delOrder', item.order_id)">删除订单</van-tag>
          </template>
          <!-- 已付款-已发货 -->
          <template v-if="item.status === 1 && item.is_out === 1 && item.is_finish === 0">
            <van-tag color="green" plain>已付款</van-tag>
            <van-tag color="#000" plain @click.stop="$router.push('/materialflow')">查看物流</van-tag>
          </template>
          <!-- 已付款-未发货 -->
          <template v-if="item.status === 1 && item.is_out === 0 && item.is_finish === 0">
            <van-tag color="green" plain>已付款</van-tag>
            <van-tag color="#000" plain @click.stop="$emit('sendGoods', item.order_id)">提醒发货</van-tag>
          </template>
          <!-- 未付款 -->
          <template v-if="item.status === 0 && item.is_cancel === 0">
            <van-tag color="red" plain>立即支付</van-tag>
            <van-tag color="#ccc" plain @click.stop="$emit('cancel', item.order_id)">取消订单</van-tag>
          </template>
          <!-- 已完成 -->
          <template v-if="item.is_finish === 1">
            <van-tag color="green" plain>已完成</van-tag>
            <van-tag color="#000" plain>去评价</van-tag>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  padding: 10px 15px;
  margin: 10px 0;
  background: #fff;

  .van-divider {
    margin: 7px 0;
  }

  .goods {
    display: flex;
    justify-content: space-between;
    height: 88px;

    img {
      width: 88px;
      height: 88px;
    }

    .text {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      font-size: 12px;

      .price {
        font-size: 16px;
      }
    }
  }

  .footer {
    .text {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 12px;
    }

    .btn {
      display: flex;
      flex-direction: row-reverse;

      .van-tag {
        padding: 4px 2px;
        margin-left: 5px;
      }
    }
  }
}
</style>
